/*
* @Date: 2021/3/27
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Modal, Form, Input, message } from 'antd';
import './index.scss';
import { get, post } from '../../../utils/http';
import ProjectItem from './ProjectItem';
import Loading from '@/components/Loading';
import { FormReceiver } from '@/utils/FormReceiver';
import '@/scss/fonts/iconfont';

const { Header, Content, Footer } = Layout;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 }
}
class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: [],
      record: {},
      showModal: false,
      isloading: false,
    };
  }

  componentWillMount () {
    this.setState({
      isloading: true,
    });
    get('/front/getProjects')
      .then((data) => {
        if (Number(data.code) === 0) {
          this.setState({
            projects: data.data.projects,
            isloading: false,
          });
        }
      });
  }

  createApplication = () => {
    this.setState({
      showModal: true,
    });
  }

  onCreate = async () => {
    this.setState({
      isloading: true,
    })
    const { record } = this.state;
    if (!record.name || record.name === '') {
      message.error('应用名称不能为空');
      return;
    }
    const data = await post('/front/addProject', record);
    if (Number(data.code) === 0) {
      this.setState({
        isloading: false,
      }, () => {
        message.success('新增成功');
        const { shortcode } = data.data;
        window.location = `/front/project?c=${shortcode}`;
      });
    } else {
      this.setState({
        isloading: false,
      }, () => {
        message.error(data.msg);
      });

    }
  }

  render() {
    const { projects = [], record, showModal, isloading = false } = this.state;
    return (
      <React.Fragment>
        <Layout className="center-layout">
          <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
            <div className="logo" />

          </Header>
          <Content className="site-center-layout" style={{ padding: '32px 24px', marginTop: 64 }}>
            {
              projects.length > 0 && (
                <div className="project-item-box-wrapper">
                  {
                    projects.map(vo => (
                      <ProjectItem { ...vo }/>
                    ))
                  }
                </div>

              )
            }
            {
              projects.length === 0 && (
                <div className="center-empty">
                  您还没有创建任何应用
                  <div className="center-create-text" onClick={this.createApplication}>立即创建</div>
                </div>
              )
            }
          </Content>
          <Footer style={{ textAlign: 'center' }}>XSass ©2021 Created by XSass</Footer>
        </Layout>
        <Modal
          title="新增应用"
          closable
          visible={showModal}
          onOk={this.onCreate}
          okText="确认"
          cancelText="取消"
        >
          <Form>
            <Form.Item
              label="应用名"
              {...formItemLayout}
            >
              <Input onChange={FormReceiver('name', record)} defaultValue={ record.name }/>
            </Form.Item>
          </Form>
          <Form.Item
            label="简介"
            { ...formItemLayout }
          >
            <Input.TextArea rows={4} onChange={FormReceiver('description', record)} defaultValue={ record.description} />
          </Form.Item>
        </Modal>
        <Loading isShow={isloading}/>
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <Page/>,
  document.getElementById('root')
);
